<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path = request.getContextPath(); %>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>注册</title>
<link rel="stylesheet" href="<%=path %>/static/css/registe.css" />
</head>

<body>
<div class="body">
<!--<img src="img/tubiao-09.png" class="logo" />-->
<p class="logo"><img width="200" src="<%=path %>/static/image/nangua.jpg"></p>
<div class="body_count">
<div class="login_count">
<div class="login_count_a">

<div id="all" style="margin-top: 0;margin-bottom: 10">
<form action="<%=path %>/UserInfoServlet?action=registe" class="registe" method="post">
<ul  id="option" style="border: 0">
<li style="margin-left:50" class="active login_left">注册</li>
<br>
<span id="judge" style="color:red">
<%=request.getAttribute("error")==null?"":request.getAttribute("error") %>
</span>
</ul>
<ul id="card">
<li class="active">
<!--输入框-->
<div class="login_bot_count">
<img src="<%=path %>/img/tubiao-07.png" alt="" />
<input type="text" name="username" id="username" placeholder="<%=request.getAttribute("username")==null?"请输入账号":request.getAttribute("username") %>"id="one" />
</div>
<div class="login_bot_count" id="pass">
<img src="<%=path %>/img/tubiao-06.png" alt="" />
<input type="password" name="password" id="password" placeholder="请输入密码"id="one"  />
<span id="passSpan"></span>
</div>
                                    <div class="login_bot_count">
<img src="<%=path %>/img/tubiao-06.png" alt="" />
<input type="password" name="" id="password2" placeholder="请输入密码"id="one"  />
</div>
<div class="login_bot">
<img class="codeImg" id="codeImg" style="width:110px;height:50px;" src="<%=path %>/CodeServlet?action=code" alt="" />
<input style="width:130px;height:30px;border: 1px solid #3EE1E2;" type="text" name="code" id="code" placeholder="请输入验证码"id="one"  />
</div>
<a class="codeImg" href="javascript:(0)">换一张</a>
<!--登录按钮-->
<input type="button" id="sub" class="login_button" value="登录">
</li>

</ul>
<span></span>
</form>
</div>

</div>
</div>

</div>
</div>

<script src="<%=path%>/static/js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".codeImg").click(function(){
$("#codeImg").attr("src","<%=path%>/CodeServlet?action=code&rand="+Math.random());
});
/* var un = false;
$("#username").blur(function(){
var username = $.trim($("#username").val());
alert(username);
if(username==""||username==null){
$("#judge").html("正确输入用户名");
}
else{
$("#judge").html("");
un=true;
}
}) */
$("#password").blur(function(){
 var reg=/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/;
     var reg1=/^[A-Za-z0-9]{6,16}$/;
     var reg2=/^\w{6,16}$/;   
     var pass = $("#password").val();
     if(pass.length<6){
    	 $("#judge").html("密码长度不得少于6位");
     }
     else{
    	 $("#judge").html("");
    	 if(reg2.test(pass)){
    	 $("#pass").css("border","1px solid #3EE1E2");
    	 $("#passSpan").css("color","#3EE1E2");
    	 $("#passSpan").html("强");
    	 $("#judge").html("");
     }
     if(reg1.test(pass)){
    	 $("#pass").css("border","1px solid orange");
    	 $("#passSpan").css("color","orange");
    	 $("#passSpan").html("中");
    	 $("#judge").html("");
     }
     if(reg.test(pass)){
    	 $("#pass").css("border","1px solid green");
    	 $("#passSpan").css("color","green");
    	 $("#passSpan").html("弱");
    	 $("#judge").html("");
     }
     }
});
$("#sub").click(function(){
// 验证用户名是否合法
var username = $("#username").val();
var usernameRe=/^\w{3,20}$/;
if(!usernameRe.test(username)){
$("#judge").html("正确输入");
$("#username").select();
return;
}
else{
$("#judge").empty();
}

// 验证密码
var password = $("#password").val();
if(password.length<6){
$("#judge").html("密码长度不得少于6位");
$("#password").select();
return;
}
else{
$("#judge").empty();
}

// 验证确认密码
var passwordAck = $("#password2").val();
if(password!=passwordAck){
$("#judge").html("密码和确认密码不相同");
$("#password2").select();
return;
}
else{
$("#judge").empty();
}

var code = $("#code").val();
$.ajax({
url:"<%=path%>/CodeServlet",
data:{action:"check",code:code},
async:false,
success:function(mes){
if("no"==mes){
$("#judge").html("验证码不正确");
$("#code").select();
}
else{
$("#judge").html("");
$(".registe").submit();
}
}
});

});
})
</script>
</body>

</html>